<template>
  <div class="play-popup" v-if="playPopupShow">
    <u-popup
      v-model="playPopupShow"
      mode="bottom"
      height="400px"
      width="90"
      border-radius="25"
      :mask="true"
    >
      <view class="play-box">
        <view class="play-title">播放列表</view>
        <view class="play-list">
          <view
            class="play-list-item"
            v-for="(item, index) in playList"
            :key="index"
            @click="checkPlayItem(item)"
          >
            <view
              class="play-list-item-name"
              :class="{ active: item.id === currentPlay.id }"
            >
              {{ item.name }}-
              <view style="font-size: 20rpx" class="ar-name">
                (<span
                  :style="{ color: item.id === currentPlay.id ? 'color' : '' }"
                  v-for="(ar, i) in item.ar"
                  :key="i"
                  >{{ ar.name
                  }}<text v-if="i != item.ar.length - 1">/</text></span
                >)
              </view>
            </view>
            <view class="play-list-item-colse" @click.stop="close(item,index)"
              ><img src="../../static/icon/close.png" width="20"
            /></view>
          </view>
        </view>
      </view>
    </u-popup>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {},
  data: () => ({
    playList: [],
    currentPlay: {},
  }),
  computed: {
    playPopupShow: {
      get() {
        return this.$store.state.playPopupShow;
      },
      set(val) {
        this.setPlayPopupShow(val);
      },
    },
  },
  methods: {
    ...mapMutations(["setPlayPopupShow"]),
    ...mapMutations(["removeSrc"]),
    close(val,i) {
      // console.log(val,i);
      // this.playList.splice(i, 1);
      let item = {
        id: val.id,
        index: i,
      }
      this.removeSrc(item);
      // console.log(this.playList);
    },
    checkPlayItem(item){
      this.util.checkPlayItem(item)
    }
  },
  watch: {
    "$store.state.playPopupShow": function () {
      if (this.$store.state.playPopupShow) {
      }
    },
    "$store.state.src": function () {
        this.currentPlay = this.$store.state.audioContent;
        this.playList = this.$store.state.src;
      // }
    },
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.currentPlay = this.$store.state.audioContent;
    this.playList = this.$store.state.src;
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.play-popup {
  .play-box {
    .play-title {
      text-align: center;
      font-size: 36rpx;
      color: $uni-text-color;
      padding: 10px;
    }
    .play-list {
      .play-list-item {
        font-size: 30rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;

        .play-list-item-name {
          padding-left: 20px;
          display: flex;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          -webkit-text-overflow: ellipsis;
          -moz-text-overflow: ellipsis;
          white-space: nowrap;
          width: 80%;
          .ar-name {
            font-size: 20rpx;
          }
        }
        .play-list-item-colse {
          padding-right: 20px;
        }
        .active {
          color: red;
          font-size: 35rpx;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
